<template>
  <view class="mobile_content">
    <!-- 手机号 -->
    <view class="login-form">
      <input
        type="number"
        :placeholder="$t('mf.auth.input_mobile')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.username"
      />
    </view>
    <!-- 验证码 -->
    <view class="login-form" style="position: relative;">
      <input
        type="number"
        :placeholder="$t('mf.auth.input_code')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.code"
      />
      <view style="
      text-align: right;
      position: absolute;
      right: 0;
      top: 0;
      ">
         <cloudSendCode
           style="flex-shrink: 0"
           v-model="form.username"
           type="mobile_register"
           category="mobile"
         >
         </cloudSendCode>
      </view>

    </view>
    <!-- 密码 -->
    <view class="login-form">
      <input
        v-if="hide1"
        type="password"
        :placeholder="$t('account.forget.placeholder.password')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.password"
      />
      <input
        v-else
        type="text"
        :placeholder="$t('account.forget.placeholder.password')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.password"
      />
    </view>
    <!-- 确认密码 -->
    <view class="login-form">
      <input
        type="password"
        :placeholder="$t('account.forget.placeholder.confim')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.config_password"
      />
    </view>
    <!-- 邀请码 -->
    <view class="login-form">
      <input
        type="text"
        :placeholder="$t('account.register.placeholder.invite')"
        placeholder-style="color: #BEBEBE;"
        v-model="form.invite_code"
      />
    </view>
    <!-- 注册 -->
    <button class="login-btn" @tap.stop="registerNow">
      {{ $t("account.register.title") }}
    </button>
  </view>
</template>

<script>
import { mapActions } from "vuex";
const graceChecker = require("@/graceUI/jsTools/graceChecker.js");
export default {
  data() {
    return {
      form: {
        username: null,
        code: null,
        password: null,
        config_password: null,
        invite_code: null,
      },
      hide1: true,
      hide2: true,
      select: {
        type: "cn",
        name: "中国",
      },
      show: null,
    };
  },
  methods: {
    ...mapActions("user", ["mobileRegister"]),
    async registerNow() {
      // 表单验证
      const rule = [
        {
          name: "username",
          checkType: "phoneno",
          errorMsg: this.$t("account.tips.mobile_not_right"),
        },
        {
          name: "password",
          checkType: "string",
          checkRule: "8,",
          errorMsg: this.$t("account.tips.password_length", { length: 8 }),
        },
        {
          name: "config_password",
          checkType: "samewith",
          checkRule: "password",
          errorMsg: this.$t("account.tips.password_not_same"),
        },
        {
          name: "code",
          checkType: "string",
          checkRule: "4,6",
          errorMsg: this.$t("account.tips.captcha_length"),
        },
      ];
      var checkRes = graceChecker.check(this.form, rule);
      if (checkRes) {
        await this.mobileRegister(this.form);
        this.makeToast(this.$t("account.tips.register_success"));
        setTimeout(() => {
          this.handleNavLogin();
        }, 1000);
      } else {
        this.makeToast({ title: graceChecker.error, icon: "none" });
      }
    },
    hideMenu2() {
      this.show = false;
    },
    selectFlag(item) {
      this.show = false;
      this.select = item;
    },
  },
  computed: {
    selectList() {
      return [
        {
          type: "cn",
          name: this.$t("flag.cn"),
        },
        {
          type: "us",
          name: this.$t("flag.us"),
        },
        {
          type: "uk",
          name: this.$t("flag.uk"),
        },
        {
          type: "rs",
          name: this.$t("flag.rs"),
        },
        {
          type: "sk",
          name: this.$t("flag.sk"),
        },
        {
          type: "jp",
          name: this.$t("flag.jp"),
        },
        {
          type: "vn",
          name: this.$t("flag.vn"),
        },
      ];
    },
  },
};
</script>

<style scoped>
.input_box {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 24rpx;
  margin-bottom: 39rpx;
  align-items: center;
  padding: 0 50rpx;
  box-sizing: border-box;
}
.input_box image {
  height: 48rpx;
  width: 32rpx;
  margin-right: 20rpx;
}
.sms {
  display: flex;
  align-items: center;
  position: relative;
}
.sms .flag {
  width: 52rpx;
  height: 33rpx;
}
.sms_number {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  font-size: 30rpx;
  margin-right: 10rpx;
}
.sms image {
  width: 30rpx;
  height: 30rpx;
}
.input_number {
  height: 98rpx;
  line-height: 98rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  padding: 0 20rpx;
  color: #fff;
}
.reg_btn {
  text-align: center;
  line-height: 100rpx;
  width: 100%;
  height: 100rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
  margin-bottom: 60rpx;
  margin-top: 80rpx;
}
.input_box .eye_img {
  width: 32rpx;
  height: 32rpx;
}
.flag_box {
  width: 173rpx;
  min-height: 470rpx;
  padding: 32rpx 32rpx;
}
.relative {
  position: relative;
  left: 100rpx;
}
.flag_list {
  height: 80rpx;
  width: 100%;
  align-items: center;
  color: #fff;
}

.reg{
  display: flex;
  justify-content: flex-end;
  margin-right: 24rpx;
  margin-top: 37rpx;
  color: #2A96EE;
  font-size: 34rpx;
}
.login{
  display: flex;
  flex-direction: column;
  margin-left: 54rpx;
  margin-top: 106rpx;
}
  .login-title{
			font-size: 48rpx;
		}
		.login-welcome{
			font-size: 28rpx;
			margin-top: 30rpx;
		}
		.login-form{
			margin-top: 30rpx;
      padding-bottom:30rpx;
      border-bottom:1px solid #e1e1e1;
		}
		.login-forgetPwd{
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			color: #2A96EE;
			margin-right: 52rpx;
			margin-top: 37rpx;
		}
		.login-btn{
			width: 642rpx;
			height: 88rpx;
			font-size: 32rpx;
			line-height: 88rpx;
			margin-top: 79rpx;
			margin-left: 0;
			border-radius: 12rpx;
      background-color: #2A96EE;
      color: #fff;
		}
    .grace-button{
          color: #fff!important;
          background-color: #2a96ee!important;
        }
    .grace-button::after {
        background-color: #2a96ee;
        z-index: -1;
    }
</style>
